<template>
   <div class="allwrop">
       <div class="allwrops">
          <router-view></router-view>
       </div>
       
       <div class="foot">
           <dl v-for="(item,index) in footList" :key="index" :class="index==ind ? 'active':''" @click="clickFn(index)">
               <dt></dt>
               <dd>{{item.name}}</dd>
           </dl>
       </div>
   </div>
</template>

<script>
export default {
     data(){
         return {
          footList:[
              {
                  name:"首页",
                  url:"/all/home"
              },
              {
                  name:"分类",
                  url:"/all/classfil"
              },
              {
                  name:"购物车",
                  url:"/all/shop"
              },
              {
                  name:"我的",
                  url:"/all/my"
              },
          ],
          ind:0,
         }
     },
     methods: {
         clickFn(ind) {
             this.ind=ind
             this.$router.push({
                 path:this.footList[ind].url
             })
         },
     },
}
</script>

<style lang="scss">
.allwrop{
    width: 100%;
    height:100%;
}
.allwrops{
   width: 100%;
   height: calc(100% - 40px);
   overflow: hidden;
}
.foot{
    width: 100%;
    height: 40px;
    display: flex;
    line-height: 40px;
    justify-content: space-around;
}
.active{
    color: red;
}
</style>